<template>
  <div>
    <h1 class="page-title">
      <font-awesome-icon icon="chart-line" />
      仪表盘
    </h1>

    <div class="dashboard-grid">
      <div class="dashboard-card">
        <div class="dashboard-card-title">本月生成的测试用例</div>
        <div class="dashboard-card-value">
          <template v-if="loading.dashboard">
            <div class="loading-placeholder"></div>
          </template>
          <template v-else-if="dashboardStats && dashboardStats.test_cases">
            {{ dashboardStats.test_cases.count }}
          </template>
          <template v-else>--</template>
        </div>
        <div
          v-if="dashboardStats && dashboardStats.test_cases"
          class="dashboard-card-change"
          :class="{
            'positive': dashboardStats.test_cases.growth > 0,
            'negative': dashboardStats.test_cases.growth < 0
          }"
        >
          <font-awesome-icon :icon="dashboardStats.test_cases.growth > 0 ? 'arrow-up' : 'arrow-down'" />
          {{ Math.abs(dashboardStats.test_cases.growth) }}% 较上月
        </div>
      </div>

      <div class="dashboard-card">
        <div class="dashboard-card-title">本月优化的需求</div>
        <div class="dashboard-card-value">
          <template v-if="loading.dashboard">
            <div class="loading-placeholder"></div>
          </template>
          <template v-else-if="dashboardStats && dashboardStats.requirements">
            {{ dashboardStats.requirements.count }}
          </template>
          <template v-else>--</template>
        </div>
        <div
          v-if="dashboardStats && dashboardStats.requirements"
          class="dashboard-card-change"
          :class="{
            'positive': dashboardStats.requirements.growth > 0,
            'negative': dashboardStats.requirements.growth < 0
          }"
        >
          <font-awesome-icon :icon="dashboardStats.requirements.growth > 0 ? 'arrow-up' : 'arrow-down'" />
          {{ Math.abs(dashboardStats.requirements.growth) }}% 较上月
        </div>
      </div>

      <div class="dashboard-card">
        <div class="dashboard-card-title">平均处理时间</div>
        <div class="dashboard-card-value">
          <template v-if="loading.dashboard">
            <div class="loading-placeholder"></div>
          </template>
          <template v-else-if="dashboardStats && dashboardStats.avg_processing_time">
            {{ dashboardStats.avg_processing_time.time }}秒
          </template>
          <template v-else>--</template>
        </div>
        <div
          v-if="dashboardStats && dashboardStats.avg_processing_time"
          class="dashboard-card-change"
          :class="{
            'positive': dashboardStats.avg_processing_time.change < 0,
            'negative': dashboardStats.avg_processing_time.change > 0
          }"
        >
          <font-awesome-icon :icon="dashboardStats.avg_processing_time.change < 0 ? 'arrow-down' : 'arrow-up'" />
          {{ Math.abs(dashboardStats.avg_processing_time.change) }}秒 较上月
        </div>
      </div>
    </div>

    <div class="content-box">
      <h2 class="result-title">最近活动</h2>
      <div class="recent-activity">
        <div v-if="loading.dashboard" class="activity-loading">
          <div v-for="i in 3" :key="i" class="activity-loading-item">
            <div class="activity-loading-icon"></div>
            <div class="activity-loading-content">
              <div class="activity-loading-title"></div>
              <div class="activity-loading-time"></div>
            </div>
          </div>
        </div>
        <template v-else>
          <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
            <div class="activity-icon">
              <font-awesome-icon :icon="getActivityIcon(activity.type)" />
            </div>
            <div class="activity-content">
              <div class="activity-title">{{ activity.description }}</div>
              <div class="activity-time">{{ formatTime(activity.created_at) }}</div>
            </div>
          </div>
          <div v-if="recentActivities.length === 0" class="no-activity">
            暂无活动记录
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'DashboardPage',
  computed: {
    ...mapState(['dashboardStats', 'recentActivities', 'loading'])
  },
  created() {
    this.fetchDashboardData();
  },
  methods: {
    ...mapActions(['fetchDashboardStats', 'fetchRecentActivities', 'showNotification']),

    async fetchDashboardData() {
      try {
        await this.fetchDashboardStats();
        await this.fetchRecentActivities();
      } catch (error) {
        this.showNotification({
          message: '获取仪表盘数据失败，请刷新重试',
          type: 'error'
        });
      }
    },

    getActivityIcon(type) {
      switch (type) {
        case 'requirement_optimization':
          return 'file-alt';
        case 'test_case_generation':
          return 'brain';
        case 'settings_update':
          return 'cog';
        default:
          return 'chart-line';
      }
    },

    formatTime(timestamp) {
      const date = new Date(timestamp);
      const now = new Date();
      const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));

      if (diffDays === 0) {
        return `今天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
      } else if (diffDays === 1) {
        return `昨天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
      } else {
        return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
      }
    }
  }
}
</script>


<style scoped>
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.dashboard-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.dashboard-card-title {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 10px;
}

.dashboard-card-value {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 5px;
}

.dashboard-card-change {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.dashboard-card-change.positive {
  color: #10b981;
}

.dashboard-card-change.negative {
  color: #ef4444;
}

.dashboard-card-change svg {
  margin-right: 4px;
  width: 12px;
}

.result-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #111827;
}

.recent-activity {
  margin-top: 10px;
}

.activity-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: #6366f1;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-weight: 500;
  color: #111827;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 12px;
  color: #9ca3af;
}

.no-activity {
  text-align: center;
  padding: 20px;
  color: #6b7280;
}

/* 加载状态样式 */
.loading-placeholder {
  height: 24px;
  background-color: #e5e7eb;
  border-radius: 4px;
  animation: pulse 1.5s infinite;
}

.activity-loading-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
}

.activity-loading-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #e5e7eb;
  margin-right: 12px;
  animation: pulse 1.5s infinite;
}

.activity-loading-content {
  flex: 1;
}

.activity-loading-title {
  height: 16px;
  width: 70%;
  background-color: #e5e7eb;
  border-radius: 4px;
  margin-bottom: 8px;
  animation: pulse 1.5s infinite;
}

.activity-loading-time {
  height: 12px;
  width: 30%;
  background-color: #e5e7eb;
  border-radius: 4px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
</style>